import React from 'react'
import "./index.css"
export default function Footer({todoList,setTodoList,id}) {
  //已完成数量
  const complete =()=>{
    return  todoList.reduce((p,c)=>{
      if(c.done){
        return p+1
      }else{
        return  p
      }
    },0)
  }
  //全选逻辑
  const allChoice = ()=>{
     if(complete() ===todoList.length&&todoList.length!==0){
      return true
    }
  }
  //清空以完成
  const deleteCompleted = ()=>{
   let  newTodo =  todoList.filter((item=>item.done!==true))
   setTodoList(newTodo)
  }
  //点击全选
  const allGO =()=>{
  const newTodo =  todoList.map((item)=>{
    
  /*   item.done=true 
    return item */
   
     return {...item,done:true}
    })
    setTodoList(newTodo)

  }


  return (
    <div className="todo-footer">
      <label>
        <input type="checkbox" checked={allChoice()} onClick={allGO}/>
      </label>
      <span>
        <span>已完成{complete()}</span> / 全部{todoList.length}
      </span>
      <button className="btn btn-danger" onClick={deleteCompleted}>清除已完成任务</button>
    </div>
  )
}
